<template>
	<view class="content">
		<!-- 拍照上传信息 -->
		<view class="zanwei"></view>
		<view class="close">
			<image src="../../static/userifo-supplement/guanbi.png" mode="" @click="close"></image>
		</view>
		<view class="head-portrait">
			<view class="head-img" @click="album()">
				<!-- <image :src=" imgBase==''? image: 'data:image/jpeg;base64,'+imgBase " mode="widthFix"></image> -->
				<image v-show="!imgBase==''" :src=" 'data:image/jpeg;base64,'+imgBase " mode="widthFix"></image>
				<image v-show="imgBase==''" :src=" image" mode="aspectFill"></image>
			</view>
			<view class="text">人像请在显示区域</view>
		</view>
		<view class="close-img">
			<view class="view">
				<image src="../../static/userifo-supplement/1.png" mode="" class="image"></image>
				<image src="../../static/userifo-supplement/close.png" mode="" class="cuowu"></image>
				<view class="text">只照头部</view>
			</view>
			<view class="view">
				<image src="../../static/userifo-supplement/1(1).png" mode="" class="image"></image>
				<image src="../../static/userifo-supplement/close.png" mode="" class="cuowu"></image>
				<view class="text">不是正身</view>
			</view>
			<view class="view">
				<image src="../../static/userifo-supplement/1(2).png" mode="" class="image"></image>
				<image src="../../static/userifo-supplement/close.png" mode="" class="cuowu"></image>
				<view class="text">光线不清晰</view>
			</view>
		</view>
		<view class="anniu" style="padding: 180rpx 0;">
			<image v-show="fanhuiHide" src="../../static/userifo-supplement/fanhui.png" mode="" @click="fanhui"
				class="fanhui"></image>
			<view class="start-btn" v-show="shotUrl" @click="shot">拍摄222</view>
			<view class="start-btn" v-show="!shotUrl" @click="oKclick">完成222</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				fanhuiHide: false,
				TipsText: "人像请在显示区域",
				imgBase: "", //头像
				image: "",
				shotUrl: true,
				uploadToken: '', //七牛上传TOKEN
			}
		},
		methods: {
			close() {
				uni.redirectTo({
					url: "./userifo-supplement"
				})
			},
			// 打开相机 识别
			shot() {
				if (this.imgBase == '') {
					var _this = this;
					var bjfFace = uni.requireNativePlugin('bjf-face');
					var config = {
						licenseFileName: 'idl-license.face-android', //授权文件名称，安卓自己可自定义名称，只要与授权文件命名一致就行
						licenseId: 'zlg-face-android', //百度授权中的License ID
						action: 'Eye' //行为动作，传递空字符串，后台随机判断取一个动作，还可取值为【Eye、Mouth、HeadUp、HeadDown、HeadLeft、HeadRight】，只能选择一个取值
					};
					if (plus.os.name == 'iOS') {
						config.licenseId = 'zlg-face-ios';
						config.licenseFileName = 'idl-license.face-ios'; //授权文件名称，经测试ios不可改，默认百度下载下来的即可
					}
					bjfFace.verifyFace(config, function(imgBase) {
						_this.imgBase = imgBase; //返回图片base64
					});
					this.shotUrl = false,
						this.fanhuiHide = true
				}
			},
			// 上传成功
			oKclick() {
				if (this.imgBase != "" || this.image != "") {
					if (this.imgBase != "") {
						console.log(this.imgBase);
						uni.setStorageSync("albumImg", this.imgBase)
					}
					uni.redirectTo({
						url: "./userifo-supplement",
					})
				} else {
					uni.showModal({
						content: "请拍照或者上传!"
					})
				}
			},
			// 返回从新识别
			fanhui() {
				this.imgBase = ""
				this.shotUrl = 'true'
				this.fanhuiHide = false
				this.image = ""
			},
			// 调用本地相册
			album() {
				uni.chooseImage({
					count: 1, //最多可以选择的图片张数
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						if (res.tempFilePaths.length > 1) return uni.showToast({
							title: '最多上传1张图片',
							icon: 'none'
						})
						this.uploadImgs(res.tempFilePaths) //图片的本地文件路径列表res.tempFilePaths
						// 将路径存到本地
						uni.setStorage({
							key: "albumImg",
							data: res.tempFiles[0].path,
							success: (res) => {}
						})
						this.imgBase = ""
					}
				})
			},
			// 上传图片至七牛
			uploadImgs(urls) {
				urls.forEach(item => {
					uni.uploadFile({
						url: this.$api.uploadPic,
						name: 'file',
						filePath: item,
						formData: {
							token: this.uploadToken
						},
						success: ({
							data
						}) => {
							data = JSON.parse(data)
							this.image = 'http://images.linglinggong.net/' + data.key,
								uni.setStorage({
									key: "imageKey",
									data: data.key,
									success: (res) => {}
								})
							this.shotUrl = false
							this.fanhuiHide = true
							// console.log(this.image,"?????????????????????????????????");
							// this.userObj.avatar = data.hash
							// this.handleSetUserInfo()//修改头像
						}
					})
				})
			},
			// 获取七牛上传TOKEN
			async get_qiniu_token() {
				let res = await this.$fetch(this.$api.get_qiniu_token, {}, 'POST')
				this.uploadToken = res.msg
			},
		},
		onShow() {
			this.get_qiniu_token()
		}
	}
</script>
<style scoped lang="less">
	.zanwei {
		width: 100vw;
		height: 88rpx;
		position: fixed;
		top: 0;
		background: #FFFFFF;
		z-index: 99999;
	}

	.content {
		margin-top: 88rpx;
		background: #FFFFFF;

		&>.close {
			width: 750rpx;
			height: 88rpx;

			// background: #FFFFFF;
			image {
				width: 48rpx;
				height: 48rpx;
				margin: 19rpx 23rpx;
			}
		}

		&>.head-portrait {
			margin: 129rpx auto 200rpx;

			.head-img {
				margin: auto;
				width: 420rpx;
				height: 420rpx;
				background: rgba(0, 0, 0, .1);
				opacity: 0.6;
				border-radius: 50%;
				background-image: url(../../static/userifo-supplement/paishe2x.png);
				background-size: 140rpx 140rpx;
				background-position: 140rpx 140rpx;
				background-repeat: no-repeat;
				overflow: hidden;

				image {
					width: 420rpx;
					height: 420rpx;
					// border-radius: 50%;
				}
			}

			.text {
				width: 318rpx;
				height: 38rpx;
				font-size: 39rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
				margin: 32rpx auto 0;
			}
		}

		&>.close-img {
			width: 574rpx;
			display: flex;
			justify-content: space-around;
			margin: auto;

			.view {
				overflow: hidden;
				position: relative;

				&>.image {
					width: 128rpx;
					height: 128rpx;
				}

				.cuowu {
					width: 29rpx;
					height: 29rpx;
					position: absolute;
					left: 50%;
					margin-left: -29/2rpx;
					bottom: 35rpx;
				}

				.text {
					width: 100%;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 27rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #000000;
					text-align: center;
					margin-top: 14rpx;
				}
			}
		}

		.anniu {
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 600rpx;
			margin: auto;

			.fanhui {
				width: 88rpx;
				height: 88rpx;
			}

			.start-btn {
				// margin: 180rpx auto;
				margin: auto;
				width: 446rpx;
				height: 88rpx;
				background: #FCC928;
				border-radius: 12rpx;
				text-align: center;
				line-height: 88rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #402110;
			}
		}
	}
</style>